<template>
	<view class="page-b">
		<!-- 自定义导航开始 -->
		<tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#0f394a">
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-white">播放页</text>
			</view>
		</tn-nav-bar>
		<!-- 自定义导航结束 -->
		
		<!-- 音乐播放开始 -->
		<view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="audio-play-cover tn-flex tn-flex-row-center tn-flex-col-center tn-margin-top-xs">
				<image :class="[playStatus ? 'turn' : '']" :src="currentPaly.cover"
					style="height:340rpx; width: 340rpx; border-radius: 50%;"></image>
			</view>
			<view class="audio-play-text tn-flex tn-flex-wrap tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-top-xl tn-color-white" style="letter-spacing: 2rpx;">
				<scroll-view style="height: 400rpx;text-align: center;">
					<view class="tn-margin-top">第一句歌词内容</view>
					<view class="tn-margin-top">第一句歌词内容</view>
					<view class="tn-margin-top">第一句歌词内容</view>
				</scroll-view>
			</view>
			<view class="audio-play-container tn-margin-top-xs tn-padding-bottom-xs" v-if="!loadState">
				<my-audio @audioDownload="audioDownload" @audioMoreList="audioMoreList" isShareBtn="true" @audioCollec="audioCollectionAction"
					@audioShare="audiShareAction" isCollectBtn="true" isCountDown @audioPlay="audioStartPlay"
					@audioPause="audioStopPlay" @audioEnd="audioStopPlay" :titleScroll="false" ref="audio"
					:src="currentPaly.audio_full_path" :title="currentPaly.title" :subTitle="currentPaly.remark"></my-audio>
			</view>
		</view>
		<!-- 音乐播放结束 -->
		
		<!-- 显示更多播放列表开始 -->
		<view>
			<tn-popup v-model="showAudioMore" mode="bottom" height="600rpx" borderRadius="10" :customStyle="{paddingBottom: '30rpx'}">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="tn-padding-left-xs tn-padding-right-xs">
						<block v-for="(item, index) in relAudioItem" :key="index">
							<view class="tn-margin-lg" @click="selectPlay(item)">
								{{ item.title }}
							</view>
						</block>
					</view>
				</scroll-view>
			</tn-popup>
		</view>
		<!-- 显示更多播放列表结束 -->
		
		<view class="tn-tabbar-height"></view>
		
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { audioContent, audioShare, audioCollection, audioList } from "@/utils/api/audio.js"
	export default {
		name: "audioPlay",
		mixins: [template_page_mixin],
		data() {
			return {
				currentPaly: {
					// 给一个默认值，避免在发起网络请求时，播放组件就已经渲染完成
					audio_full_path: "http://qiniucloudtest.qqdeveloper.com/files/95c7d8a4e6383964b1f73d65b3d0d35f.mp3",
				},
				loadState: true,
				audioUid: "",
				playStatus: false,
				showAudioMore: false,
				relAudioItem: [],
			}
		},
		onLoad(params) {
			uni.setNavigationBarColor({
				frontColor: "#ffffff"
			})
			this.audioUid = params.uid || ""
		},
		onShow() {
			this.audioContent(1)
		},
		onShareAppMessage(res) {
			let shareUrl = "/pageAudio/list/index"
			if (res.from === "button") {
				shareUrl = "/pageAudio/play/index?uid=" + this.currentPaly.uid
			}
			return {
				title: this.currentPaly.title,
				path: shareUrl,
				imageUrl: this.currentPaly.cover,
				desc: this.currentPaly.title,
				success() {
					console.log("接口调用成功")
				},
				complete(res) {
					console.log(res, "分享完成")
				}
			}
		},
		onShareTimeline() {
			return {
				title: this.currentPaly.title,
				path: "/pageAudio/play/index?uid=" + this.currentPaly.uid,
				imageUrl: this.currentPaly.cover,
				desc: this.currentPaly.title,
				success() {
					console.log("接口调用成功")
				},
				complete(res) {
					console.log(res, "分享完成")
				}
			}
		},
		methods: {
			audioContent(type = 2) {
				uni.showLoading({
					title: "努力加载中",
				})
				audioContent({uid: this.audioUid}).then(res => {
					this.currentPaly = res.data
					this.loadState = false
					uni.hideLoading()
					if (type === 1) {
						this.audioList(res.data.tag_uid)
					}
				})
			},
			selectPlay(item) {
				this.currentPaly = {}
				this.audioUid = item.uid
				this.showAudioMore = false
				this.loadState = true
				this.audioContent()
			},
			audioList(tagUid) {
				audioList({tag_uid: tagUid}).then(res => {
					this.relAudioItem = res.data.items
				})
			},
			audioCollectionAction() {
				audioCollection({uid: this.audioUid}).then(res => {
					this.$func.showToast(res.msg)
				})
			},
			audioStartPlay() {
				this.playStatus = true
			},
			audioStopPlay() {
				this.playStatus = false
			},
			closePalyPopup() {
				this.playStatus = false
				this.currentPaly = {}
			},
			audiShareAction() {
				audioShare({ uid: this.audioUid }).then(res => {
					this.$func.showToast(res.msg)
				})
			},
			audioMoreList() {
				if (!this.relAudioItem.length) {
					this.$func.showToast("无更多内容")
					return
				}
				this.showAudioMore = true
			},
			audioDownload() {
				if (getApp().globalData.showAd) {
					this.showAd()
					return
				}
				this.$func.downloadVideoFile(this.currentPaly.audio_full_path)
			},
			async showAd() {
				let index = await this.$func.randomIntFromInterval(0, getApp().globalData.rewardedVideoAd.length - 1)
				this.$func.showRewardedVideoAd(getApp().globalData.rewardedVideoAd[index], res => {
					console.log("广告播放结束", res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-b {
		height: 90vh;
		background-color: #0f394a;
	}
	// 音频封面旋转开始
	/* 旋转动画 指定class为trun即可使用*/
	.turn {
		animation: turn 10s linear infinite;
	}
	/* 
	turn : 定义的动画名称
	10s : 动画时间
	linear : 动画平滑
	infinite :使动画无限循环
	transform:rotate(旋转角度)
	%0:动画开始
	%100:动画结束
	*/
	@keyframes turn {
		0% {
			transform: rotate(0deg);
		}

		20% {
			transform: rotate(72deg);
		}

		40% {
			transform: rotate(144deg);
		}

		60% {
			transform: rotate(216deg);
		}

		80% {
			transform: rotate(288deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	// 音频封面旋转结束

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;
		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}
	.audio-play-container {
		position: fixed;
		width: 100%;
		bottom: 0;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		color: #FFF !important;
		background-color: #042330;
	}
	.audio-play-cover {
		height: 40%;
	}
	.left-width {
		flex-basis: 28%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {
		&__search {
			&--wrap {}
			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
			}
			&__icon {
				padding-right: 10rpx;
			}

			&__text {
				padding-right: 10rpx;
			}
		}
	}
</style>